<div class="layui-card">

	<div class="layui-card-header">
		我的基本资料
	</div>

	<div class="layui-card-body">
		<form class="layui-form" action="" lay-filter="zbyUser" id="formTag1" enctype="multipart/form-data">
			<input name="userId" type="hidden" />
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-inline">
					<input type="tel" style="border: none;" name="username" lay-verify="username" autocomplete="off" disabled value="" placeholder="请输入标题" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">角色</label>
				<div class="layui-input-inline">
					<input type="tel" style="border: none;" name="rolename" autocomplete="off" disabled value="" placeholder="请输入标题" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">昵称</label>
				<div class="layui-input-inline">
					<input type="tel" name="nicename" lay-verify="title" autocomplete="off" placeholder="请输入昵称" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">头像</label>
				<div class="layui-input-inline">
					<!--<div class="layui-upload">
						<button type="button" class="layui-btn" id="test1">上传图片</button>
						<div class="layui-upload-list">
							<img class="layui-upload-img" src="" name="imgFile" width="100px" height="100px" id="demos">
							<p id="demoText"></p>
						</div>
					</div>-->
					<div class="uploadImgBtn" id="uploadImgBtn">
						<input class="uploadImg" type="file" name="picUrl" id="file1">
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">验证手机</label>
				<div class="layui-input-inline">
					<input type="tel" name="mobile"  autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">验证邮箱</label>
				<div class="layui-input-inline">
					<input type="text" name="email" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="男" title="男" checked="">
					<input type="radio" name="sex" value="女" title="女">
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-block">
					<textarea placeholder="请输入内容" name="remark" class="layui-textarea"></textarea>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
				</div>
			</div>
		</form>
	</div>
</div>

<script>
	layui.use(['form', 'layedit', 'laydate', 'config', 'admin'], function() {
		var form = layui.form,
			layer = layui.layer,
			layedit = layui.layedit,
			config = layui.config,
			admin = layui.admin,
			laydate = layui.laydate;
		//			upload = layui.upload;

		form.render();
		var alog = config.getTempData('loginInfo');
		var rid = []
		showUI()

		//自定义验证规则
		form.verify({
			title: function(value) {
				if(value.length < 1) {
					return '昵称至少得1个字符啊';
				}
			}
		});

		$(document).ready(function() {
			$("#file1").on("change", upload);
		})
		var paths = ''

		function upload() { /** * 我们存一下this对象， * 我们将在ajax的回调函数中， * 将要用这个对象， * 用它来改变父盒子的背景图 * */
			var self = this; //如果不理解我写的，可以看看我的前几篇文章 
			console.log($(self).parent());
			$.ajax({
				url: uploadHead,
				type: "post",
				dataType: "json",
				cache: false,
				data: new FormData($("#formTag1")[0]),
				xhrFields: {
					withCredentials: true
				},
				processData: false, // 不处理数据 
				contentType: false, // 不设置内容类型 
				success: function(data) { /* 后端返回的数据格式为 {"url": "xxxxxx"} */
					paths = data.rows
					$(self).parent().css({
						"background-image": "url(" + data.rows + ")"
					})
					//					$('#uploadImgBtn').attr("background-image", data.rows)
				}
			})
		}
		form.on('submit(demo1)', function(data) {
			$.ajax({
				type: "POST",
				url: updateUser,
				traditional: true,
				data: {
					email: data.field.email,
					picUrl: paths,
					mobile: data.field.mobile,
					nicename: data.field.nicename,
					remark: data.field.remark,
					sex: data.field.sex,
					userId: data.field.userId,
					username: data.field.username,
					password:null,
					roleIdList:rid
				},
				dataType: "json",
				xhrFields: {
					withCredentials: true
				},
				success: function(data) {
					layer.closeAll('loading');
					layer.msg(data.msg, {
						icon: 1
					});
				},
				error: function(result) {
					console.log(result);
				},
			});

			return false;
		});
	

		function showUI() {
			$.ajax({
				type: "POST",
				url: infosUser,
				data: {
					userId: alog.userId
				},
				dataType: "json",
				xhrFields: {
					withCredentials: true
				},
				success: function(data) {
					console.log(data)
					$.ajax({
						type: "POST",
						url: path + '/sys/role/list1',
						async:false, 
						data: {
							sortOrder: "asc",
							pageSize: 1000,
							pageNumber: 1,
							roleName: ''
						},
						dataType: "json",
						xhrFields: {
							withCredentials: true
						},
						beforeSend: function(request) {},
						success: function(datas) {
							//渲染表格
							var js = ""
							for(var i = 0; i < datas.rows.length; i++) {
								if(datas.rows[i].roleId == data.rows.roleIdList[0]) {
									js = datas.rows[i].roleName
								}
							}
							rid=  data.rows.roleIdList

							form.val('zbyUser', {
								"userId": data.rows.userId,
								"username": data.rows.username,
								"mobile": data.rows.mobile,
								"nicename": data.rows.nicename,
								"email": data.rows.email,
								"sex": data.rows.sex,
								"remark": data.rows.remark,
								"rolename": js
							})
						},
						error: function(result) {
							console.log(result);
						},
					})
					paths = data.rows.picUrl
					if(data.rows.picUrl!=null){
						$('#uploadImgBtn').css("background-image", "url(" + data.rows.picUrl + ")")
					}
				},
				error: function(result) {
					console.log(result);
				},
			});
		}
	});
</script>